<template>
    <span>
        <!-- {{ data.fileList }} -->
        <!-- 本地调试,不上传模式    :auto-upload="false" -->
        <el-upload v-model:file-list="data.fileList" class="upload-demo" action="action" :limit="props.config.limit" :auto-upload="true"
            :http-request="onHttpRequest" :on-change="onChange" :on-error="onError" :on-exceed="handleExceed"
            :before-upload="beforeAvatarUpload">
            <el-button type="primary">点击上传</el-button>
            <template #tip>
                <div class="el-upload__tip">
                    {{ props.config.info }}
                </div>
            </template>
            <template #file="{ file }">
                <div class="f-fcont  f-aic" style="width:200px;">
                    <span class="f-mr10 f-tal f-ell" style="width:100px;" :title="file">
                        {{ file.name }}
                    </span>
                    <!-- <span>{{ file.status }}</span> -->
                    <el-icon class="f-mr10 f-cp" :size="19"
                        @click="handlePictureCardPreview(file)"><zoom-in /></el-icon>

                    <el-icon class="f-mr10 f-cp" :size="19" @click="handleRemove(file)">
                        <Delete />
                    </el-icon>
                    <!-- <el-icon class="f-mr10":size="19"  @click="handlePictureCardPreview(file)">
            <Download />
          </el-icon> -->
                </div>
            </template>
        </el-upload>
        <el-dialog v-model="dialogVisible">
            <img style="width: 100%;max-width:800px;" :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </span>
</template>
<script setup>
import { ref, reactive, toRefs, watchEffect ,computed, watch,onUpdated,onBeforeUpdate,onBeforeMount,onMounted} from "vue";

// props接收数据
const props = defineProps({
    value: {
        type: [Array, String],
        default: function () {
            return []
        }
    },
    config: {
        type: Object,
        default: function () {
            return {
                limit: 3,
                type: ['image/png', 'image/jpeg', 'application/pdf'],
                typeInfo: '文件格式不正确!',
                size: 1024 * 1024 * 2,// 2MB
                sizeInfo: '文件大小不正确!',
                info: 'jpg/png 文件 且大小不超过 500kb',
            }
        }
    },
    // 多种类型
});

// const data = reactive({fileList: computed(() => props.value)});
const data = reactive({fileList: []});

const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const onChange = (uploadFile, uploadFiles) => {
    // return false
    // console.log(11111,222222222222222)
    var number = props.config.limit;
    data.fileList = data.fileList.slice(-number)
}

const emit = defineEmits(["change",'update:emit']);
// emit('update:emit', data.value); // 双向绑定数据改变,update必须结合v-model
const onHttpRequest = function (param) {
    console.log(param)
    return klcs.ajaxTest('https://www.fastmock.site/mock/')
        .then(res => {
            console.log(res)
            if (res) {
                param.onSuccess()
                ElMessage.success('上传成功')
                emit('update:value', data.fileList); // 双向绑定数据改变,update必须结合v-model
                emit("change", data.value); // 事件触发
            } else {
                // ElMessage.error('上传失败')
                param.onError()
            }
        })
        .catch(err => {
            // ElMessage.error('上传失败')
            console.error("上传失败",err)
            param.onError()
        })
}

// 上传前校验格式和大小
const beforeAvatarUpload = (rawFile) => {
    console.info("校验格式", rawFile.type)
    if (!props.config.type.includes(rawFile.type)) {
        ElMessage.error(props.config.typeInfo)
        return false
    }
    // 校验大小
    if (rawFile.size > props.config.size) {
        ElMessage.error('文件大小超过限制!')
        return false
    }


    return true
}

const onError = function (err, file, fileList) {
    console.log(err, file, fileList)
    ElMessage.error('上传失败')
}

const handlePictureCardPreview = (file) => {
    dialogImageUrl.value = file.url
    dialogVisible.value = true
}

const handleRemove = (file) => {
    let index = data.fileList.findIndex(fileItem => fileItem === file.response)
    data.fileList.splice(index, 1);
    console.log(file)
}

const handleDownload = (file) => {
    console.log(file)
}

// 异常提示
const handleExceed = (files, uploadFiles) => {
    if (data.fileList.length >= props.config.limit) {
        ElMessage.error('超出上传限制!')
        return false
    }
    // ElMessage.warning(
    //     `请按照要求上传文件 `
    // )
}


watch(() => props.value, (newValue, oldValue) => {

    if (props.value) {
        data.fileList = klcs.deepClone(true,[],props.value);
    } else {
    
    }
},{ deep: true , immediate: true });
</script>